<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo08-表单绑定</title>
</head>
<script src="../libs/vue.js"></script>
<body> 
    <div id="app"> 
      <div>

      <select v-model="selected">
        <option disabled value="">请选择</option>
        <option v-for="option in options" v-bind:value="option.value">
          {{ option.text }}
        </option>
      </select>
      <span>Selected: {{ selected }}</span>

      </div>

      <div>
        <input
  type="checkbox"
  v-model="radioData.toggle"
  true-value="yes"
  false-value="no"
>
<span>the text : {{ radioData.toggle }}</span>
<span> the obj : {{ radioData }}</span>
      </div>
<hr><br>

<div>
  <input type="radio" name="apick" v-model="pick" value="a">
  <input type="radio" name="apick" v-model="pick" value="b">
  <!-- 通过绑定值，来自定义值域 -->
  <input type="radio" name="apick" v-model="pick" :value="a">
  <input type="radio" name="apick" v-model="pick" :value="b">
  <span> show pick: {{pick}} , show a , b : {{a}} , {{b}}</span>
</div>

<hr><br>

<div>
  <!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">
<span>  print msg : {{msg}}</span>
</div>

<hr><br>

<div>
  <input v-model="age" type="number">
  <input v-model.number="age2" type="number">
  <span>print age : {{age}}</span>
  <button v-on:click="showType">显示类型</button>
</div>

    </div>
</body>
<script>
    Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
  data: {
    selected: '',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ],
    radioData : {
      toggle : null
    },
    toggle: null ,
    pick: null ,
    a:'aaa',
    b:'bbb',

    msg:'this is a msg ' , 
    age:1 , 
    age2:2
  },
  methods:{
    showType:function(){
      // 就算上边age属性为number，input model变更后，age1的type仍为string
      var age1 = typeof this.age;
      var age2 = typeof this.age2;
      
      alert(`typeof age1 : ${age1} , typeof age2: ${age2}`);
    }
  }
});

</script>
</html>